{% extends "base.html" %}

{% load emojificate heroicons humanize i18n package_tags page_metadata_tags partials static waffle_tags %}

{% block metadata %}
    {% page_metadata page_title=package.title|emojify|emojificate page_description=package.repo_description page_keywords=package.grid_set.all|join:',' og_image_url=package.get_opengraph_image_url %}
{% endblock metadata %}

{% block extra_head %}
    {{ block.super }}
    {% include 'includes/_ethicalads-js.html' %}
    <script src="{% static 'js/clipboard.min.js' %}"></script>
{% endblock extra_head %}

{% block breadcrumb %}
    <div class="breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h2>
                        <a href="{% url 'packages' %}">{% translate "Packages" %}</a> ›› {{ package.title }}
                        <div class="pull-right">
                            <div class="btn btn-default">
                                <a href="{% url 'edit_package' package.slug %}"><span class="glyphicon glyphicon-pencil"></span></a>
                            </div>
                            {% flag "favorite_feature_flag" %}
                                <script>
                                    document.body.addEventListener('htmx:configRequest', function(event) {
                                        event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}'; // add a new parameter into the mix
                                    });
                                </script>
                                <span id="favorite">
                                    {% if is_favorited %}
                                        {% include "package/partials/favorites.html#unfavorite_btn" %}
                                    {% else %}
                                        {% include "package/partials/favorites.html#favorite_btn" %}
                                    {% endif %}
                                </span>
                            {% endflag %}


                        </div>
                    </h2>
                </div>
            </div>
        </div>
    </div>
{% endblock breadcrumb %}

{% block body %}

    {% comment %}
<!--TODO block until we get things sorted out -->
{% if warnings %}
  <ul class="messages">
    {% if pypi_ancient %}
      <li class="warning">WARNING: This package's most recent PyPI release is from over a year ago and may no longer be maintained.</li>
    {% endif %}
    {% if no_development %}
      <li class="warning">WARNING: This package has not seen any development in over a year and may no longer be maintained.</li>
    {% endif %}
    {% if pypi_no_release %}
      <li class="note">NOTE: This package is not available for download from PyPI. It may be using a third-party site to host its downloadable package files.</li>
    {% endif %}
  </ul>
{% endif %}
    {% endcomment %}

    <div class="row">
        <div class="col-md-8 main">

            {% if package.is_deprecated %}
                <div class="alert alert-warning" role="alert">This project was deprecated
                    {% if package.deprecates_package %}
                        and replaced by <a href="{{ package.deprecates_package.get_pypi_uri }}" target="_blank">{{ package.deprecates_package.pypi_name }}</a>
                    {% endif %}
                </div>
            {% elif package.date_repo_archived %}
                <div class="alert alert-warning" role="alert">This project was archived</div>
            {% endif %}

            <div class="text-xl pt-[10px] pb-[20px]">{{ package.repo_description|emojify|emojificate }}</div>

            {% comment %}
    <h3>Usage</h3>
      <table class="table">
        <thead>
        <tr>
          <th>{% translate "Category" %}</th>
          <th>{% translate "# Using This" %}</th>
        </tr>
        </thead>

        <tbody>
          <tr>
            <td>
              <a href="{% url 'category' package.category.slug %}">{{ package.category }}</a>
            </td>
            <td>
                {{ package.usage.count }}
                &nbsp;
                {% with package=package %}
                    {% usage_button %}
                {% endwith %}
            </td>
          </tr>
        </tbody>
      </table>

    <!-- end Usage panel -->
    {% endcomment %}
            <h2>
                {% translate "Repo Activity" %}
                <div class="pull-right" id="fetch-cell">
                    {% if package.last_fetched %}
                        <span class="small-text">{% translate "Last fetched" %}: {{ package.last_fetched|timesince }} ago</span>&nbsp;
                    {% endif %}
                    <a class="btn btn-default btn-xs"
                       href="{% url 'fetch_package_data' package.slug %}">{% translate "Fetch latest data" %}</a>
                </div>
            </h2>

            <table class="table" aria-label="Repository Statistics">
                <thead>
                    <tr>
                        <th scope="col">Repository</th>
                        <th
                            scope="col"
                            data-toggle="tooltip"
                            data-placement="top"
                            aria-label="{% translate 'History of commits in the last 52 weeks' %}"
                            title="{% translate 'History of commits in the last 52 weeks' %}"
                        >
                            {% translate "Commits" %}
                        </th>
                        {% flag "enabled_packages_score_values" %}
                            <th
                                {% if TEST_MODE %}data-testid="repository-statistics-score-header"{% endif %}
                                scope="col"
                                data-toggle="tooltip"
                                data-placement="top"
                                aria-label="{% translate 'Score' %}"
                                title="{% translate 'Scores (0-100) are based on Repository stars, with deductions for inactivity (-10% every 3 months) and lack of Python 3 support (-30%).' %}"
                            >
                                <span class="glyphicon glyphicon-stats"></span>
                            </th>
                        {% endflag %}
                        <th
                            scope="col"
                            data-toggle="tooltip"
                            data-placement="top"
                            aria-label="{% translate 'Number of Stars' %}"
                            title="{% translate 'Number of stars on the Repository.' %}"
                        >
                            <span class="glyphicon glyphicon-star"></span>
                        </th>
                        <th
                            scope="col"
                            data-toggle="tooltip"
                            data-placement="top"
                            aria-label="{% translate 'Number of Forks' %}"
                            title="{% translate 'Number of forks on the Repository.' %}"
                        >
                            <span class="glyphicon glyphicon-random"></span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td scope="row"><a href="{{ package.repo_url }}">{{ package.repo_url }}</a></td>
                        <td>
                            {% include "package/includes/_commits.html" with value=package.commits_over_52 %}
                        </td>
                        {% flag "enabled_packages_score_values" %}
                            <td {% if TEST_MODE %}data-testid="repository-statistics-score-cell"{% endif %}>
                                {{ package.score|intcomma|default:"n/a" }}
                            </td>
                        {% endflag %}
                        <td>{{ package.repo_watchers|intcomma|default:"n/a" }}</td>
                        <td>{{ package.repo_forks|intcomma|default:"n/a" }}</td>
                    </tr>
                </tbody>
            </table>

            <!-- end Repo panel -->

            <!-- start PyPI panel -->
            <h2>Releases</h2>

            {% if package.get_pypi_uri %}

                <table class="table">
                    <thead>
                        <tr>
                            <th>{% translate "Version" %}</th>
                            <th>{% translate "License" %}</th>
                            <th>{% translate "Released" %}</th>
                            <th>{% translate "Status" %}</th>
                            <th>{% translate "Python 3?" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for version in package.version_set.by_version_not_hidden %}
                            <tr>
                                <td>{{ version.number }}</td>
                                <td>{{ version.pretty_license|default:"none" }}</td>
                                <td>{{ version.upload_time|date:"SHORT_DATE_FORMAT" }}</td>
                                <td>{{ version.pretty_status }}</td>
                                <td>
                                    {% if version.supports_python3 %}
                                        <span class="glyphicon glyphicon-ok"></span>
                                    {% else %}
                                        <span class="glyphicon glyphicon-remove"></span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        <td>
                            {% for flag in package.flags.all %}
                                {% if flag.approved_flag %}
                                    <span class="glyphicon glyphicon-flag"></span>
                                {% elif not flag.approved_flag and request.user.is_superuser %}
                                    <div>{{ flag.reason }}</div>
                                    <div><a href="{% url 'flag_approve' package.slug %}">Approve</a>&nbsp;|
                                        <a href="{% url 'flag_remove' package.slug %}">Remove</a>
                                    </div>
                                {% elif not flag.approved_flag and not request.user.is_superuser %}
                                    <p>Flag pending review</p>
                                {% endif %}
                            {% empty %}
                                <a href="{% url 'flag' package.slug %}">Click to flag</a>
                            {% endfor %}
                        </td>
                    </tbody>
                </table>
            {% else %}
                <div class="panel-body">
                    <p>{% translate "No PyPI release" %}</p>
                </div>
            {% endif %}
            <!-- end PyPI panel -->

            <!-- start Participants panel -->


            <!-- end Participants panel -->

        </div> <!-- end six column section -->
        <div class="">
            <div class="col-md-4 sidebar">
                {% with ea_id="package-detail" ea_type="text" %}
                    {% include 'includes/_ethicalads-tag.html' %}
                {% endwith %}

                {% if package.is_deprecated %}
                    <div>
                        <h3>Replacement Package</h3>
                        <p><a href="{{ package.deprecates_package.get_pypi_uri }}" target="_blank">{{ package.deprecates_package.pypi_name }}</a></p>

                        <h3>Date Deprecated</h3>
                        <p>{{ package.date_deprecated }}</p>
                    </div>
                {% endif %}

                <h3>{% translate "Documentation" %}</h3>
                <div class="pull-right">
                    {% if request.user.is_authenticated %}
                        <a href="{% url 'edit_documentation' package.slug %}"><span
                            class="glyphicon glyphicon-plus"></span></a>
                    {% endif %}
                </div>
                <p>{{ package.documentation_url|urlize }}</p>

                {% if package.get_pypi_uri %}
                    <h3>PyPi</h3>
                    <p><a href="{{ package.get_pypi_uri }}" target="_blank">{{ package.pypi_name }}</a></p>
                {% endif %}

                <h3>Repo</h3>
                <p><a href="{{ package.repo_url }}" target="_blank">{{ package.repo_url }}</a></p>

                <h3>{% translate "Comparison Grids" %}</h3>
                <div class="pull-right">
                    {% if request.user.is_authenticated and profile.can_add_grid %}
                        <a id="find-a-grid" href="#"><span class="glyphicon glyphicon-plus"></span></a>
                    {% endif %}
                </div>

                {% for grid in package.grid_set.all %}
                    <a href="{% url 'grid' grid.slug %}" title="{{ grid.description }}">{{ grid }}</a> &nbsp;
                {% endfor %}
                {% if request.user.is_authenticated and profile.can_add_grid %}
                    {% include "package/includes/_attach_grid.html" %}
                {% endif %}

                <h3>{% translate "Sites using this package" %}</h3>
                <div class="pull-right">
                    {% if request.user.is_authenticated %}
                        <a href="{% url 'add_example' package.slug %}"><span
                            class="glyphicon glyphicon-plus"></span></a>
                    {% endif %}
                </div>

                {% with examples=package.active_examples %}
                    {% if examples %}
                        <ul>
                            {% for example in examples %}
                                <li>
                                    <a href="{{ example.pretty_url }}" rel="nofollow">{{ example.title }}</a>
                                    {% if request.user.is_authenticated %}&nbsp;
                                        <a href="{% url 'edit_example' package.slug example.id %}"><span
                                            class="glyphicon glyphicon-pencil"></span></a>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p>No sites using this package have been listed yet.</p>
                    {% endif %}
                {% endwith %}

                <h3>{% translate "README Badge" %}</h3>
                <div>
                    {% blocktranslate %}If you're the maintainer of this project, publicize Django Packages by adding the badge to your README!{% endblocktranslate %}
                    <div>
                        <pre id="badgeurl">[![Published on Django Packages](https://img.shields.io/badge/Published%20on-Django%20Packages-0c3c26)]({{ request.build_absolute_uri }})
<button class="copybtn btn btn-default btn-xs" aria-label="{% translate 'Copy to Clipboard' %}" title="{% translate 'Copy to Clipboard' %}" data-clipboard-target="#badgeurl">{% heroicon_outline 'document-duplicate' %}</button></pre>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row" style="padding-bottom: 20px;">
        <div class="col-sm-12">
            <h2>{% translate "Contributors" %}</h2>

            <p>
                {% for participant in package.participant_list %}
                    <a href="{% participant_url package.repo participant %}">{{ participant }}</a>&nbsp;
                {% endfor %}
            </p>
        </div>
    </div>
{% endblock body %}

{% block javascript %}
    {{ block.super }}
    <script src="{{ STATIC_URL }}js/underscore.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}js/gh3.js" type="text/javascript"></script>
{% endblock javascript %}

{% block extra_body %}

    <script type="text/javascript">
        $(function() {

            $('#find-a-grid').click(function(e) {
                e.preventDefault();
                $('#find-a-grid').hide();
                $('#find-a-grid-form').show();
                $('#find-a-grid-input').focus();

                $('#find-a-grid-input').keyup(function() {
                    var search_text = $('input#find-a-grid-input').val();
                    var search_text = '{% url 'ajax_grid_list' %}?q=' + search_text + '&package_id={{ package.id }}';
                    console.log(search_text);
                    $.get(search_text, function(data) {
                        $('#target').html(data).show("slow");
                    });
                });

                $("#find-a-grid-form").keypress(function(e) {
                    if (e.which == 13) {
                        return false;
                    };
                });

            });
        });
    </script>
    <script src="{% static 'js/htmx.min.js' %}" defer></script>
    <script>new ClipboardJS('.copybtn');</script>
{% endblock extra_body %}
